<html>
<head>
<wicket:head>
<style>
	.gform{
		width:500px;
		padding:10px;
		background-color: #FFE;
	}
	
	.gform dl{
		margin-left:20px;
		}
	
	.gform dt{
		width:150px;
		font-weight: bold;
		color: #666;
		margin-bottom: 2px;
	}
	
	.gform dd{
		width: 200px;
		margin-bottom: 10px;
	}
	
</style>
<script type="text/javascript">
	$(document).ready(function(){
		$("#groupForm").submit(function(){
			if($("#gname").val().length < 1){
				Edushare.FunctionalTextFields.SetError("Group name is required");
				return false;
			}
			
			if($("#gname").val().length > 40){
				Edushare.FunctionalTextFields.SetError("Group name is too long. It must be less than 40 letters.");
				return false;
			}
			if($("#gdesc").val().length > 3){
				Edushare.FunctionalTextFields.SetError("Group description is too long.");
				return false;
			}
			return true;
		});
	});
</script>
</wicket:head>
</head>
<body>
<wicket:panel>
<div class="es-subPanel" style="margin-left:10px;width:650px;">
		<div wicket:id="activeFrag" class="gform">
			frags goes here
		</div>
		<div wicket:id="nextFragDiv">next frag goes here!</div>
</div>
</wicket:panel>
<wicket:fragment wicket:id="formFrag">
	<h3 style="color:#999;margin-bottom:10px;">Create A New Group</h3>
	<form wicket:id="groupForm">
	<dl>
		<dt>Group Name:</dt>
		<dd><input wicket:id="gname" type="text" style="width:450px;"/></dd>
		<dt>Group description:</dt>
		<dd><textarea wicket:id="gdesc"></textarea></dd>
		<dt></dt>
		<dd><button type="submit" class="es-button ui-state-default ui-corner-all">Create Group</button></dd>
	</dl>
	</form>
</wicket:fragment>
<wicket:fragment wicket:id="nextFrag">
<div style="margin:10px; border: 1px dotted #DEDDEF; background-color:#FFE; padding:20px;">
	<h4>What's Next?</h4>
	<div style="margin-left:20px;font-size:14px;">
		<p>New group named <span wicket:id="ngrouplink">new group</span> has been created successfully.</p>
		<p>What do you want to do next?</p>
		<div style="margin-left:20px;font-size:12px;font-weight:bold;">
			<span style="border:1px solid #DEDDEF; background:#FFC; padding: 3px 10px;"><a wicket:id="ggo" href="#">Go To The New Group, and Configure it.</a></span>&nbsp;&nbsp;&nbsp;
			<span style="border:1px solid #DEDDEF; background:#FFC; padding: 3px 10px;"><a wicket:id="gback" href="#">Go Back to the list of Groups</a></span>
		</div>
	</div>
</div>
</wicket:fragment>
</body>
</html>